<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style type="text/css">
      .mui-bar {
        background-color: transparent;
        color: #fff;
      }

      .mui-bar-nav.mui-bar .mui-icon {
        color: #fff;
      }

      .mui-bar .icon-xiaoxi {
        position: relative;
        color: #fff;
      }

      .mui-title {
        color: #fff;
      }

      .searDiv {
        padding-top: 44px;
      }

      .header {
        width: 100%;
        height: 160px;
        position: fixed;
        top: 0;
        background: #0082E6;
        background-size: 100%;
        z-index: 111;
      }

      .search {
        background-color: #fff;
        margin-top: 10px;
        border-radius: 25px;
        overflow: hidden;
        position: relative;

      }

      .mui-content {
        padding-top: 170px;
      }

      .mui-input-row .mui-btn+input,
      .mui-input-row label+input,
      .mui-input-row:last-child {
        background: #fff;
      }

      .mui-search {
        background: #fff;
        /* border-radius: 25px; */
        overflow: hidden;
        float: left;
        width: 90%;
      }

      .mui-search input {
        background-color: #fff;
        text-align: left;

        margin-bottom: 0;
        border-radius: 20px;
      }

      .mui-search .mui-placeholder {
        text-align: left;
        padding-left: 4px;
      }

      .search .code {
        width: 10%;
        background-color: #fff;
        display: inline-block;
        height: 34px;
        line-height: 34px;
        color: #333;
        font-size: 20px;
      }

      .mui-search:before {

        margin-top: -10px;

        content: '\e466';
      }

      .homeContent {
        margin-top: 20px;
      }

      .screen {
        width: 100%;
      }

      .screenList {
        line-height: 28px;
        text-align: center;
        width: 25%;
        /* padding-right: 4px; */
      }

      .screenList>span.text-cut {
        width: 75%;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .screenList span {
        padding-right: 4px;
        overflow: hidden;
        display: inline-block;
      }

      .fixed-title {
        width: 100%;
        background: #CFD8DE;
        /* padding: 4px 0; */
        display: flex;
      }

      .fixed-title span {
        display: inline-block;
        /* width: 50%; */
        /* flex:1; */
        padding: 6px 10px;
        font-size: 0.8rem;
        text-align: left;
        box-sizing: border-box;
      }

      /* .fixed-title span:first-child {
        width: 30%;
      }

      .fixed-title span:last-child {
        width: 30%;
      } */

      .list {
        display: flex;
        position: relative;
        padding: 8px 0;
      }

      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }

      .list>div {
        /* width: 50%; */
        /* flex: 1; */
        padding: 6px 10px;
        font-size: 16px;
        text-align: left;
        box-sizing: border-box;
        font-size: 14px;
      }

      /* .list>div:first-child {
        width: 30%;
      }

      .list>div:last-child {
        width: 30%;
      } */

      .arrow {
        padding-right: 10px !important;
      }

      .arrow:after {
        right: 15px;
        content: '\e583';
      }

      .arrow:after {
        font-family: Muiicons;
        font-size: inherit;
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 2px;
        display: inline-block;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-decoration: none;
        color: #bbb;
        -webkit-font-smoothing: antialiased;
      }
      .mui-checkbox input[type=checkbox].checkbox{
       position: relative;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="header">
        <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
          <h1 class="mui-title">设备档案</h1>
          <a class="mui-pull-right mui-right-icon" style="color: #fff;" @click="insert()">{{editShow?"完成":"离线存储"}}</a>
        </header>
        <div class="searDiv">
          <div class="search margin-lr">
            <div class="mui-input-row mui-search" id="search">
              <input type="search" class="mui-input-clear" placeholder="" readonly="readonly">
            </div>
            <a href="" class="iconfont icon-saoyisao1 code"></a>
          </div>
        </div>
        <div class="screen padding-lr margin-top-sm">
          <div class="flex justify-between text-sm text-white align-center">
            <div class="screenList flex-sub" @click="area()"><span class="text-cut">{{form.chooseArea.name?form.chooseArea.name:'选择区域'}}</span><span
                class="iconfont icon-jiantouxia" style="font-size: 12px;"></span></div>
            <div class="screenList flex-sub text-cut" @click="station()"><span class="text-cut">{{form.chooseStation.name?form.chooseStation.name:'选择场站'}}</span><span
                class="iconfont icon-jiantouxia" style="font-size: 12px;"></span></div>
            <div class="screenList flex-sub" @click="project()"><span class="text-cut">{{form.chooseItem.name?form.chooseItem.name:'选择项目'}}</span><span
                class="iconfont icon-jiantouxia" style="font-size: 12px;"></span></div>
            <div class="screenList flex-sub" id="show-btn"><span class="iconfont icon-shaixuan1"></span><span>筛选</span></div>
          </div>
        </div>
        <div class="fixed-title">
          <span v-show="editShow" style="width: 50px;"></span>
          <span class="flex-sub">设备名称</span>
          <span class="flex-sub">功能位置编码</span>
          <!-- <span>子设备</span> -->
          <!-- <span>所属项目</span> -->
        </div>
      </div>
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper bg-white">
        <div class="mui-scroll">
          <p v-if="isNet" class="padding-top mui-text-center">暂无数据</p>
          <div class="list align-center" @click="detail(item)" v-for="item in list">
            <div class="mui-checkbox" v-show="editShow" style="width: 50px;" @click="stop()">
              <input name="checkbox" :value="item.id" type="checkbox" class="checkbox" v-model="checkModel"
                @change="checkChange()">
            </div>
            <div class="flex-sub">{{item.deviceName}}</div>
            <div class="flex-sub">{{item.mdmCode}}</div>
            <!-- <div>9</div> -->
            <!-- <div class="arrow">{{item.projectNames}}</div> -->
          </div>
        </div>

      </div>
    </div>

  </body>
</html>
<script src="../../../js/mui.min.js"></script>
<script src="../../../js/vue.js"></script>
<script src="../../../js/jquery-1.7.2.min.js"></script>
<script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/mui.dtpicker.js"></script>
<script src="../js/sqlite.js"></script>
<script src="../js/mkeyplus.base.js"></script>
<script type="text/javascript">
  var countDown = 0; //下拉次数
  var countUp = 0; //上拉次数
  var fileVM = null; // 列表实例
  var databaseName = "offlineFiles"; //定义表的名字
  var bdName = "files"; //数据库的名字
  var dictName = "offlineDicts"; //数据库的名字
  var size = 10;
  var page = 0;
  var home=null;
  var main, menu, mask = mui.createMask(_closeMenu);
  var showMenu = false,
    mode = 'main-move';
  
  mui.init({
    swipeBack: false,
    beforeback: back,
    pullRefresh: {
      container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
      down: { //下拉刷新
        style: 'circle',
        height: 50, //可选,默认50.触发下拉刷新拖动距离,
        auto: false, //可选,默认false.首次加载自动下拉刷新一次
        callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        setTimeout(function() {
        	page = 0;
        	load(page);
        }, 1000);
          
          ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
          mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
          // countDown++;
        }
      },
      up: { //上拉加载
        // height: 50, //可选.默认50.触发上拉加载拖动距离
        auto: false, //可选,默认false.自动上拉加载一次
        callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
          /*每次加载动态的添加一个li*/
          // $("#testUl").append($("<li>" + new Date() + "</li>"));
          setTimeout(function() {
          	page++;
          	load(page);
          }, 1000);
          
          // this.endPullupToRefresh(false)
        }
      }
    }
  });
  mui.plusReady(function() {
    if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
       fileVM.isNet = true;
    }
      load(page);
      dictData();
    home = plus.webview.currentWebview().opener();
    main = plus.webview.currentWebview();
    //setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
    setTimeout(function() {
      //侧滑菜单默认隐藏，这样可以节省内存；
      menu = mui.preload({
        id: 'offcanvas-drag-right-plus-menu',
        url: '../file/offcanvas-drag-right-plus-menu.html',
        styles: {
          left: "30%",
          width: '70%',
          zindex: 9997
        }
      });
    }, 300);
    if(!validBdOpen(bdName)){
      
      createDb(bdName)
    }
  })
  fileVM = new Vue({
    el: "#content",
    data: {
      list: [],
      i: 5,
      isNet:false,
      form:{
        mdmProp: {
          text: '',
          value:''
        },
        mdmMainFlag: true,
        chooseItem: {
          id: ''
        },
        chooseArea: {
          id: ''
        },
        chooseStation: {
          id: ''
        }
      },
      checkModel: [],
      editShow: false,
      all: false
      
    },
    created: function() {
    },
    methods: {
      insert() {
        this.editShow = !this.editShow;
        this.checkModel = [];
        mui.fire(home,'check'); 
      },
      stop(){
        event.stopPropagation(); 
      },
      checkChange() {
        var that = this;
        console.log(that.checkModel)
        var ids = []
        that.list.forEach(function(item, index) {
          ids.push(item.id);
        })
        if (that.checkModel.sort().toString() === ids.sort().toString()) {
          that.all = true
        } else {
          that.all = false
        }
        mui.fire(home,'checkAll',{all: that.all});
      },
      detail: function(item) {
        mui.openWindow({
          url: '../file/fileDetail.html',
          id: '../file/fileDetail.html',
          createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
          extras: {
            pageId: item.id
          }
        })
      },
      area() {
        mui.openWindow({
          url: '../file/area.html',
          id: '../file/area.html',
          extras: {
            type: 1
          }
        })
      },
      station() {
        mui.openWindow({
          url: '../file/area.html',
          id: '../file/area.html',
          extras: {
            type: 0
          }
        })
      },
      project() { //所属项目
        mui.openWindow({
          url: '../file/project.html',
          id: '../file/project.html',
          createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
        })
      },
    }
  })
  function dictData() {//获取所有数据字典
    var baseSql = 'create table if not exists ' + dictName + '("dictItem" text)';
    executeListSQL(bdName, baseSql);
    mui.baseApp.httpRequst("/api/dictItem/allMap", {}, function(data) {
      
      var sql = "insert into " + dictName + " values('"+ JSON.stringify(data) +"')";
      executeListSQL(bdName, sql);
    }, function() {
      console.log("获取数据失败");
    })
  }
  function load(page) {
    let sort = "updateDate,desc";
    mui.baseApp.httpRequst("/api/metadataDocument", {
      page: page,
      size: 10,
      isTemplate: false,
      sort: 'updateDate,desc',
      deleted: false,
      projectId: fileVM.form.chooseItem.id,
      stationId: fileVM.form.chooseStation.id,
      areaId: fileVM.form.chooseArea.id,
      mdmMainFlag: fileVM.form.mdmMainFlag,
      mdmTypeId: fileVM.form.mdmProp.value,
    }, function(data) {
      if (page == 0) {
        fileVM.list = []
      }
      fileVM.list = fileVM.list.concat(data.records);
      //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
      if (data.records.length < size) { //
        mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
        mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
        return;

      } else {
        mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
        mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
      }
    }, function() {
      console.log("获取数据失败");
    })
  }
  window.addEventListener("chooseItem", function(e) {
    fileVM.form.chooseItem = e.detail.item;
    page = 0;
    load(page);
  });
  window.addEventListener("chooseArea", function(e) {
    fileVM.form.chooseArea = e.detail.item;
    page = 0;
    load(page);
  });
  window.addEventListener("chooseStation", function(e) {
    fileVM.form.chooseStation = e.detail.item;
    page = 0;
    load(page);
  });
  window.addEventListener("screenMain", function(e) {
    fileVM.form = e.detail.form;
    page = 0;
    load(page);
  });
  window.addEventListener("chooseAll", function(e) {
    console.log('接收到');
    fileVM.all = e.detail.all;
    console.log(fileVM.all)
    if (fileVM.all) {
      fileVM.list.forEach(function(item, index) {
        fileVM.checkModel.push(item.id);
      })
    } else {
      fileVM.checkModel = []
    }
  });
  //批量存储
  window.addEventListener("offline", function(e) {
    var checkList=[];
    if(fileVM.checkModel.length===0){
      mui.toast('请选择数据');
      return;
    }
    fileVM.editShow = !fileVM.editShow;
    mui.fire(home,'check'); 
    fileVM.list.forEach(function(item, index) {
      fileVM.checkModel.forEach(function(item1, index1) {
        if(item.id==item1){
          checkList.push(item);
        }
      });
    })
    batchOffline(checkList,fileVM.checkModel)
    console.log('已批量选择的'+checkList.length);
  });
  //模拟线程等待,ms:单位毫秒
  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  function back() {
    if (showMenu) {
      //菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
      closeMenu();
      return false;
    } else {
      //菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
      menu.close('none');
      return true;
    }
  }
  document.getElementById("show-btn").addEventListener('tap', openMenu);
  /**
   * 显示菜单菜单
   */
  function openMenu() {
    if (!showMenu) {
      //侧滑菜单处于隐藏状态，则立即显示出来；
      //显示完毕后，根据不同动画效果移动窗体；
      menu.show('none', 0, function() {

        menu.setStyle({
          left: '30%',
          transition: {
            duration: 150
          }
        });

      });
      //显示遮罩
      mui.fire(menu, 'get_screen', {form: fileVM.form});
      mask.show();
      showMenu = true;
    }
  }
  /**
   * 关闭侧滑菜单
   */
  function closeMenu() {
    _closeMenu();
    //关闭遮罩
    mask.close();
  }

  /**
   * 关闭侧滑菜单（业务部分）
   */
  function _closeMenu() {
    if (showMenu) {
      //关闭遮罩；

      //主窗体开始侧滑；
      menu.setStyle({
        left: '100%',
        transition: {
          duration: 150
        }
      });
      //等窗体动画结束后，隐藏菜单webview，节省资源；
      setTimeout(function() {
        menu.hide();
      }, 200);
      //改变标志位
      showMenu = false;
    }
  }
  // window.addEventListener("swiperight", openMenu);
  //变换侧滑动画移动效果；
  window.addEventListener("menu:swipeleft", closeMenu);
  mui.menu = function() {
    if (showMenu) {
      closeMenu();
    } else {
      openMenu();
    }
  }
  document.getElementById("search").addEventListener('click',function () {  
      //获得主页面的webview  
      var main = plus.webview.currentWebview().opener();
      //触发主页面的gohome事件  
      mui.fire(main,'gohome');  
  });
</script>
